<template>
  <div id="top">
    <p v-if="songlistMsg.length !== 0" class="title_common">官方榜</p>
    <TopHeaderItem
      v-for="(item, index) in songlistMsg"
      :key="index"
      :songlist="item"
    />
    <p class="title_common" style="margin: 30px 0">全球榜</p>
    <TopBottomItem
      :songlist="topList"
    />
  </div>
</template>

<script>
  import TopHeaderItem from "./childcomps/TopHeaderItem";
  import TopBottomItem from "./childcomps/TopBottomItem";

  import {home} from "@/network/home";

  export default {
    name: "Top",
    components:{
      TopHeaderItem,
      TopBottomItem
    },
    data(){
      return {
        topList:[], //排行榜数据
        songlistMsg:[],
      }
    },
    created() {
      this.getTop()
    },
    methods:{
      //获取排行榜数据
      getTop(){
        home.getTop().then(res => {
          this.topList = res.data.list
          for(let i = 0;i < 4; i++){
            this.getSonglistDetail(this.topList[i].id)
          }
        })
      },
      //获取歌单详情数据的函数
      getSonglistDetail(id){
        home.getSonglistDetail(id).then(res => {
          this.songlistMsg.push(res.data.playlist)
        })
      },
    },
  }
</script>

<style scoped>
.title_common{
  font-size: 18px;
  color: #2a2727;
  font-weight: 700;
  margin-left: 20px;
  margin-top: 10px;
}
</style>
